<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary" fixed>
            <mu-button icon slot="left" @click.native="goback">
                <mu-icon value="reply"></mu-icon>
            </mu-button>
            我的活动
            <mu-button icon slot="right" >
                <mu-icon value="more_horiz"></mu-icon>
            </mu-button>
        </mu-appbar>
        <!-- card  start-->
        <el-card :body-style="{ padding: '10px' }" v-for="(act,index) in acts" :key='index' >
            <img :src="act.pic" class="image" @click="toDetail(index)">
            <div style="padding: 14px;">
                <span>{{act.title}}</span>
                <div class="bottom clearfix">
                    <time class="time">发布日期：{{ act.uploadtime | formatDate }}</time> 
                    <el-button v-if="acts[index].signlist[0].status==1" class="passbuttoned" type="text"  >已通过</el-button>
                    <el-button v-if="acts[index].signlist[0].status==0" class="unpassbuttoned" type="text"  >待通过</el-button>
                    <el-button v-if="acts[index].signlist[0].status==2" class="passbuttoned" type="text"  >未通过</el-button>
                </div>
            </div>
        </el-card>
        <br>
        <!-- card  end-->
    </div>
</template>

<script>
import axios from "axios";
import { formatDate } from "../../date/date.js";
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  data() {
    axios.get("/api/user/signinRequired").then(result=>{
      let user =result.data
      this.un=user.username
      console.log(this.un)
    })
    return {
      acts: "",
      un:'',
      status:''
    };
  },
  methods: {
    goback() {
      this.$router.go(-1); //返回上一层
    },
    toDetail(index) {
        console.log()
      this.$router.push({
        path: "/find/detail",
        query: { id: this.acts[index]._id }
      });
    }
  },
  created() {
    axios
      .get("/api/activity/getsignedacts", {})
      .then(res => {
        console.log(res.data.data)
        this.acts = res.data.data.reverse();
        console.log(this.acts)
      })
      .catch(err => {
        console.log(err);
      });
      axios
      .get("/api/activity/getsignedactsstatus", {})
      .then(res => {
        this.status = res.data.data.reverse();
        console.log(this.status[0].signlist[0].status)
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>.image {
  width: 100%;
  display: block;
}.unpassbuttoned {
  padding: 0;
  float: right;
  color: orange;
}.passbuttoned {
  padding: 0;
  float: right;
  color: green;
}
</style>
